<template>
  <div class="info-box">
    <div class="flex line-first">
      <div class="content flex items-center flex-1" v-for="item in list" :key="item.name">
        <div class="label">{{ item.name }}</div>
        <div class="name">{{ item.value }}</div>
      </div>
    </div>
    <div class="line-first flex">
      <div class="content flex items-center flex-1" v-for="item in secondList" :key="item.name">
        <div class="label">{{ item.name }}</div>
        <div class="name">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const list: any[] = [
  {
    name: '任务/关注',
    value: 35
  },
  {
    name: '海务类',
    value: 10
  },
  {
    name: '采购操作类',
    value: 4
  }
]
const secondList: any[] = [
  {
    name: '全部',
    value: 40
  },
  {
    name: '机务类',
    value: 18
  },
  {
    name: '船员类',
    value: 22
  }
]
</script>
<style lang="scss" scoped>
.info-box {
  background: #fff;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
  // border-radius: 6px;
  box-shadow: 0px 8px 20px 0px rgba(134, 154, 183, 0.08);
  padding: 8px 20px;

  background-image: url('@/assets/images/renwuBg.png');
  background-position: top left;
  background-size: 100% 80%;
  background-repeat: no-repeat;
  .line-first {
    .label {
      color: #565b66;
      font-size: 12px;
    }
    .name {
      font-family: OPPOSans, OPPOSans;
      font-size: 18px;
      color: #212429;
      padding-left: 6px;
      position: relative;
      top: -3px;
    }
  }
}
</style>
